$fontColorMajor: $white;
$fontColorMinor: $metal;
$fontColorSmall: $smoke;

$fontSizeH1: 20px;
$fontSizeH2: 20px;
$fontSizeH3: 18px;
$fontSizeH4: 16px;
$fontSizePr: 14px;
$fontSizeSm: 12px;

$foreground: $coal;
$background: $black;
$midground: $smoke;
$highlight: $grey;

$borderLight: $metal;
$borderHeavy: $smoke;

$colorMajor: $blue;
$colorMinor: $aqua;

$hoverMajor: $blue;
$hoverMinor: $highlight;
$hoverPercent: 30%;

$animationDuration: 0.2s;
$transitionDuration: 0.2s;

$scrollbarWidth: 10px;

$topBarHeight: 33px;
$bottomBarHeight: 23px;
$sidebarHandleWidth: 15px;
$fileManagerHeight: 280px;

$inputBackground: $ebony;
$tabListBackground: $colorMajor;


:root {
	--background: $background;
	--foreground: $foreground;
	--fcMajor: $fontColorMajor;
	--fcMinor: $fontColorMinor;
	--fcSmall: $fontColorSmall;
}

@mixin box-shadow {
	// box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, .5);
}

@mixin border-radius {
	// border-radius: 30px;
}

@mixin border($size: 1px, $direction: 0) {
	@if $direction !=0 {
		border-#{$direction}: $size solid $grey;
	}

	@else {
		border: $size solid $grey;
	}
}

@mixin input() {
	background-color: $inputBackground;
	border: none;
	border-bottom: 2px solid $borderLight;
	color: $fontColorMajor;
}